import { Form, Input, Icon, Tag, Tooltip, Select } from 'antd';
import React, { Component } from 'react';
import isEqual from 'lodash/isEqual';

const { Option } = Select;

class SkuTagGroup extends Component {
  static defaultProps = {
    data: [],
  };

  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
      tags: [],
      inputVisible: false,
      inputValue: '',
    };
  }

  static getDerivedStateFromProps(nextProps, preState) {
    console.log('nextPorps', nextProps);
    console.log('preState', preState);
    if (isEqual(nextProps.data, preState.data)) {
      return null;
    }
    console.log('bbbbb');
    return {
      data: nextProps.data,
    };
  }

  saveInputRef = input => (this.input = input);

  showInput = () => {
    this.setState({ inputVisible: true });
  };

  // select改变传递value值： {key: 1, label: '350ml'}
  handleSelectChange = value => {
    let { tags } = this.state;
    if (value.label && tags.indexOf(value.label) === -1) {
      tags = [...tags, value.label];
    }
    console.log('tags', tags);
    this.setState({
      tags,
      inputVisible: false,
      inputValue: '',
    });
    // this.setState({ inputValue: value.label });
  };

  // 失去焦点或Enter时触发
  handleInputConfirm = () => {
    const { inputValue } = this.state;
    let { tags } = this.state;
    if (inputValue && tags.indexOf(inputValue) === -1) {
      tags = [...tags, inputValue];
    }
    console.log('tags', tags);
    this.setState({
      tags,
      inputVisible: false,
      inputValue: '',
    });
  };

  // 关闭Tag触发
  handleClose = removedTag => {
    const { tags } = this.state;
    const tagsValue = tags.filter(tag => tag !== removedTag);
    console.log(tagsValue);
    this.setState({ tags: tagsValue });
  };

  render() {
    const { data, tags, inputVisible, inputValue } = this.state;

    return (
      <div>
        {tags.map((tag, index) => {
          const isLongTag = tag.length > 20;
          // const tagId = tag.id;
          // const tagValue = tag.value;
          const tagId = tag;
          const tagValue = tag;
          const tagElem = (
            <Tag key={tagId} closable onClose={() => this.handleClose(tag)}>
              {isLongTag ? `${tagValue.slice(0, 20)}...` : tagValue}
            </Tag>
          );
          return isLongTag ? (
            <Tooltip title={tagValue} key={tagId}>
              {tagElem}
            </Tooltip>
          ) : (
            tagElem
          );
        })}
        {inputVisible && (
          <Select
            showSearch
            defaultOpen
            labelInValue
            style={{ width: 120 }}
            size="small"
            placeholder="请选择"
            optionFilterProp="children"
            onChange={this.handleSelectChange}
            // onFocus={onFocus}
            // onBlur={this.handleInputConfirm}
            // onSearch={onSearch}
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {data && data.map(o => <Option value={o.id} key={o.id}>{o.value}</Option>)}
          </Select>

          // <Input
          //   ref={this.saveInputRef}
          //   type="text"
          //   size="small"
          //   style={{ width: 100 }}
          //   value={inputValue}
          //   onChange={this.handleInputChange}
          //   onBlur={this.handleInputConfirm}
          //   onPressEnter={this.handleInputConfirm}
          // />
        )}
        {!inputVisible && (
          <Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed' }}>
            <Icon type="plus" /> 添加
          </Tag>
        )}
      </div>
    );
  }
}

export default Form.create()(SkuTagGroup);
